import React,{useState,useEffect} from 'react'
import {Select,Input,Button,DatePicker ,Space,Table,Divider,Pagination ,Radio ,Drawer ,Form,Checkbox,message ,Switch } from 'antd'
import {useDispatch,useSelector} from "react-redux"
import { createFromIconfontCN } from "@ant-design/icons";
const { RangePicker } = DatePicker
const IconFont = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/font_2928153_a8ynxy9hpn5.js",
});

export default function Menu() {
  
      const columns = [
        {
          title: '名称',
          dataIndex: 'title',
          key: 'title',
        },
        {
          title: '图标',
          dataIndex: 'icon',
          key: 'icon',
          render:(val)=>{
            return (
                <IconFont  type={`icon-${val}`}/>  
            )
          }
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          render:(val)=>{
              console.log(val);
          }
        },
        {
            title: '地址',
            dataIndex: 'path',
            key: 'path',
        },
        {
            title: 'Vue组件',
            dataIndex: 'component',
            key: 'component',
        },
        {
            title: '权限',
            dataIndex: 'permission',
            key: 'permission',
        },
        {
            title: '排序',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '修改时间',
            dataIndex: 'modifyTime',
            key: 'modifyTime',
        },
    
    ];
    
    const [searchOn,setSearchOn]=useState({})
    //获取仓库数据
    const result =useSelector(state=>state.userRc)

    const dispatch = useDispatch()
         //输入用户名的回调
         const inputUser=(e)=>{
            setSearchOn({
              ...searchOn,
              menuName:e.target.value
            })
          }
    //选择日期的回调
      const inputTime=(value)=>{
        if(value){
          setSearchOn({
            ...searchOn,
            createTimeFrom:value[0]._d.toLocaleDateString().replaceAll('/','-'),
            createTimeTo:value[1]._d.toLocaleDateString().replaceAll('/','-')
          })  
        }else {
          setSearchOn({
            ...searchOn,
            createTimeFrom:'',
            createTimeTo:''
          }) 
        }
      }
     //页面一进来执行
     useEffect(()=>{
        //获取角色数据
        dispatch({
          type:'getMenu'
        })

    },[])
      //查询
      const searchData=()=>{
        console.log(searchOn);
      }
      //删除
      const delRole=()=>{
          console.log(result.menus);
   
      }
      //表格区域
      const [checkStrictly, setCheckStrictly] = React.useState(false);
      const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`具体的id: ${selectedRowKeys}`, '具体的值: ', selectedRows);
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
      };
    return (
        <>
        {/* 头部区域 */}
        <div style={{marginBottom: '20px' }}>
        <label htmlFor="">角色：</label>
        <Input placeholder="请输入角色" style={{width:300}} onChange={inputUser}/>
        &nbsp; &nbsp;
        <label htmlFor="">创建时间：</label>
        <Space direction="vertical" size={12} >
            <RangePicker onChange={inputTime}  format='YYYY-MM-DD'/>
        </Space>
        &nbsp; &nbsp;
        <Button type="primary"  onClick={searchData}>查询</Button>
        </div>
        <Button>新增</Button>
        &nbsp; &nbsp;
        <Button  onClick={delRole}>删除</Button>
        {/* 表格区域 */}
      <Table
        columns={columns}
        rowSelection={{ ...rowSelection, checkStrictly }}
        dataSource={result.menus}
      />

        </>
    )
}
